<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      <el-breadcrumb-item>查询学生、编辑学生</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <!--搜索框-->
      <el-col :span="6">
        <el-input placeholder="按学号查询" v-model="searchNum" class="input-with-select" @keyup.enter.native="searchData1">
          <el-button slot="append"  icon="el-icon-search" @click="searchdata1"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6" style="margin-left: 90px;margin-right: 90px;">
        <el-input placeholder="按姓名查询" v-model="search" class="input-with-select" @keyup.enter.native="searchData2">
          <el-button slot="append"  icon="el-icon-search" @click="searchdata"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input placeholder="按班级查询" v-model="searchClass" class="input-with-select" @keyup.enter.native="searchData3">
          <el-button slot="append" icon="el-icon-search" @click="searchdata2"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <!--表格模块-->
    <el-table :data="students" highlight-current-row
              ref='table'  border stripe height="300" style="margin-top: 30px;">
      <el-table-column type="index" fixed align="center"></el-table-column>
      <el-table-column prop="stuNum" label="学号"  align="center" width="120"></el-table-column>
      <el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
      <el-table-column prop="stuSex" label="性别" align="center"></el-table-column>
      <el-table-column prop="stuCard" label="身份证号" align="center" width="180"> </el-table-column>
      <el-table-column prop="stuPhone" label="手机号码" align="center" width="120"> </el-table-column>
      <el-table-column prop="stuAcademy" label="学院" align="center" width="180"></el-table-column>
      <el-table-column prop="stuMajor" label="专业" align="center" width="180"></el-table-column>
      <el-table-column prop="stuClass" label="班级" align="center" width="100"> </el-table-column>
      <el-table-column prop="stuPwd" label="密码" align="center"> </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="120">
        <template slot-scope="scope">
          <!-- 修改 -->
          <el-tag
            type="primary"
            effect="dark"
            @click="openupdate(scope.row)"
          >编辑
          </el-tag>
          <el-tag
            type="danger"
            effect="dark"
            @click="deleteStudent(scope.row.stuNum)"
          >删除
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!--分页插件-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curpage"
      :page-sizes="[2, 4, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    <!-- 编辑 -->
    <el-dialog title="编辑学生" :visible.sync="updatestudentdialog" @close="closeupdate">
      <el-form :model="updatestudentform" :rules="updatestudentrules" ref="updateform" label-width="auto"  style="width:85%"
               class="demo-form-inline form">
        <el-form-item prop="stuNum" label="学生学号"  >
          <el-input v-model="updatestudentform.stuNum" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item prop="stuName" label="学生姓名" >
          <el-input v-model="updatestudentform.stuName" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item prop="stuSex" label="学生性别" >
          <el-input v-model="updatestudentform.stuSex" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="stuCard" label="身份证号" >
          <el-input v-model="updatestudentform.stuCard" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="stuPhone" label="手机号码" >
          <el-input v-model="updatestudentform.stuPhone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在学院" prop="stuAcademy">
          <el-select v-model="updatestudentform.stuAcademy" filterable >
            <el-option label="计算机科学学院" value="计算机科学学院"></el-option>
            <el-option label="电子信息学院" value="电子信息学院"></el-option>
            <el-option label="纺织科学与工程学院" value="纺织科学与工程学院"></el-option>
            <el-option label="机电工程学院" value="机电工程学院"></el-option>
            <el-option label="环境与化学工程学院" value="环境与化学工程学院"></el-option>
            <el-option label="管理学院" value="管理学院"></el-option>
            <el-option label="服装与艺术设计学院" value="服装与艺术设计学院"></el-option>
            <el-option label="人文社会科学学院" value="人文社会科学学院"></el-option>
            <el-option label="理学院" value="理学院"></el-option>
            <el-option label="新媒体艺术学院" value="新媒体艺术学院"></el-option>
            <el-option label="马克思主义学院" value="马克思主义学院"></el-option>
            <el-option label="应用技术学院" value="应用技术学院"></el-option>
            <el-option label="材料工程学院" value="材料工程学院"></el-option>
            <el-option label="城市规划与市政工程学院" value="城市规划与市政工程学院"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="stuMajor" label="所学专业">
          <el-select v-model="updatestudentform.stuMajor"  filterable>
            <el-option-group
              v-for="group in options"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item prop="stuClass" label="行政班级" >
          <el-input v-model="updatestudentform.stuClass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="stuPwd" label="学生密码" >
          <el-input type="password" v-model="updatestudentform.stuPwd" auto-complete="off" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatestudentdialog = false">取 消</el-button>
        <el-button type="primary" @click="updateStudent">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>

</template>

<script>
  import axios from 'axios';//axios
  import Qs from 'qs';//qs
  export default {
    name:"studentList",
    //绑定数据
    data() {
      return {
        students:[],//注意使用表格时，pop属性对应的内容等价于后端数据传输的字段(键)
        curpage:1,//当前页
        pagesize:4,//每页显示条数
        total:0,//总条数
        options: [
          {
            label: '计算机科学学院',
            options: [
              {
                value: '计算机科学与技术',
                label: '计算机科学与技术'
              }, {
                value: '软件工程',
                label: '软件工程'
              },{
                value: '网络空间安全',
                label: '网络空间安全'
              },{
                value: '数据科学与大数据技术',
                label: '数据科学与大数据技术'
              },{
                value: '智能科学与技术',
                label: '智能科学与技术'
              },
            ]
          },
          {
            label: '理学院',
            options: [{
              value: '信息与计算科学',
              label: '信息与计算科学'
            }, {
              value: '数学与应用数学',
              label: '数学与应用数学'
            }, {
              value: '应用物理学',
              label: '应用物理学'
            }, {
              value: '统计学',
              label: '统计学'
            },{
              value: '微电子科学与工程',
              label: '微电子科学与工程'
            },{
              value: '金融工程',
              label: '金融工程'
            }]
          },
          {
            label: '人文社会科学学院',
            options: [
              {
                value: '法学',
                label: '法学'
              },{
                value: '汉语言文学',
                label: '汉语言文学'
              },
              {
                value: '英语',
                label: '英语'
              },
              {
                value: '汉语国际教育',
                label: '汉语国际教育'
              }
            ]

          },
          {
            label: '新媒体艺术学院',
            options: [
              {
                value: '播音与主持艺术',
                label: '播音与主持艺术'
              },
              {
                value: '广播电视编导',
                label: '广播电视编导'
              },
              {
                value: '动画',
                label: '动画'
              },
              {
                value: '戏剧影视美术设计',
                label: '戏剧影视美术设计'
              }
            ]
          },
          {
            label: '材料工程学院',
            options: [
              {
                value: '高分子材料与工程',
                label: '高分子材料与工程'
              },
              {
                value: '材料科学与工程',
                label: '材料科学与工程'
              },
              {
                value: '材料成型及控制工程',
                label: '材料成型及控制工程'
              },
            ]
          },
          {
            label: '城市规划与市政工程学院',
            options: [
              {
                value: '土木工程',
                label: '土木工程'
              },
              {
                value: '建筑环境与能源应用工程',
                label: '建筑环境与能源应用工程'
              },
              {
                value: '给排水科学与工程',
                label: '给排水科学与工程'
              },
              {
                value: '风景园林',
                label: '风景园林'
              }
            ]
          },
          {
            label: '纺织科学与工程学院',
            options: [
              {
                value: '纺织工程',
                label: '纺织工程'
              },
              {
                value: '非织造材料与工程',
                label: '非织造材料与工程'
              },
              {
                value: '轻化工程',
                label: '轻化工程'
              }
            ]
          },
          {
            label: '机电工程学院',
            options: [
              {
                value: '机械设计制造及其自动化',
                label: '机械设计制造及其自动化'
              },
              {
                value: '远程装备与控制工程',
                label: '远程装备与控制工程'
              },
              {
                value: '机械工程',
                label: '机械工程'
              },
              {
                value: '智能制造工程',
                label: '智能制造工程'
              }
            ]
          },
          {
            label: '环境与化学工程学院',
            options: [
              {
                value: '应用化学',
                label: '应用化学'
              },
              {
                value: '生物工程',
                label: '生物工程'
              },
              {
                value: '环境工程',
                label: '环境工程'
              },
              {
                value: '化学工程与工艺',
                label: '化学工程与工艺'
              }
            ]
          },
          {
            label: '电子信息学院',
            options: [
              {
                value: '电子信息工程',
                label: '电子信息工程'
              },
              {
                value: '通信工程',
                label: '通信工程'
              },
              {
                value: '自动化',
                label: '自动化'
              },
              {
                value: '电气工程及其自动化',
                label: '电气工程及其自动化'
              },
              {
                value: '机器人工程',
                label: '机器人工程'
              },
              {
                value: '人工智能',
                label: '人工智能'
              }
            ]
          },
          {
            label: '管理学院',
            options: [
              {
                value: '工商管理',
                label: '工商管理'
              },
              {
                value: '大数据管理与应用',
                label: '大数据管理与应用'
              },
              {
                value: '会计学',
                label: '会计学'
              },
              {
                value: '国际经济与贸易',
                label: '国际经济与贸易'
              },
              {
                value: '人力资源管理',
                label: '人力资源管理'
              },
              {
                value: '行政管理',
                label: '行政管理'
              }
            ]
          },
          {
            label: '服装与艺术设计学院',
            options: [
              {
                value: '服装设计与工程',
                label: '服装设计与工程'
              },
              {
                value: '工业设计',
                label: '工业设计'
              },
              {
                value: '视觉传达设计',
                label: '视觉传达设计'
              },
              {
                value: '环境设计',
                label: '环境设计'
              },
              {
                value: '产品设计',
                label: '产品设计'
              },
              {
                value: '服装与服饰设计',
                label: '服装与服饰设计'
              },
              {
                value: '美术学',
                label: '美术学'
              },
              {
                value: '表演',
                label: '表演'
              }
            ]
          }
        ],
        addstudentdialog:false,//默认时关闭模态框的
        updatestudentdialog:false,
        addstudentform:{
          stuNum:"",
          stuName:"",
          stuSex:"",
          stuCard:"",
          stuPhone:"",
          stuAcademy: "",
          stuMajor:"",
          stuClass:"",
          studentPwd:"",
        },//form表单中的数据绑定
        addrules:{
          stuName:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"姓名为必填项",trigger:'blur'},
            {min:2,max:6,message: "姓名的长度为2-6之间",trigger: 'blur'}
          ],
          stuCard:[
            { required: true, message: '请输入身份证号', trigger: 'change' },
            { pattern: /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/, message: '请输入正确的身份证号码', trigger: 'change' }
          ],
          stuPhone:[
            // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
            { required: true, message: '请输入手机号', trigger: 'change' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
          ],
          stuPwd:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"密码为必填项",trigger:'blur'},
            {min:3,max:6,message: "密码的长度为3-6之间",trigger: 'blur'}
          ]
        },
        formLabelWidth:"120px",//表单标签的宽度
        updatestudentform:{//修改功能数据绑定
          stuNum:"",
          stuName:"",
          stuSex:"",
          stuCard:"",
          stuPhone:"",
          stuAcademy: "",
          stuMajor:"",
          stuClass:"",
          studentPwd:"",
        },
        updatestudentrules:{
          stuName:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"用户名为必填项",trigger:'blur'},
            {min:3,max:6,message: "用户名的长度为2-6之间",trigger: 'blur'}
          ],
          stuCard:[
            { required: true, message: '请输入手机号', trigger: 'change' },
            { pattern: /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/, message: '请输入正确的身份证号码', trigger: 'change' }
          ],
          stuPhone:[
            // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
            { required: true, message: '请输入手机号', trigger: 'change' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
          ],
          stuPwd:[
            //--用户名和密码不能为null，且用户名和密码的长度为3-6之间
            {required:true,message:"密码为必填项",trigger:'blur'},
            {min:3,max:6,message: "密码的长度为3-6之间",trigger: 'blur'}
          ]
        },//修改功能的数据校验
        searchNum:'',
        search:"",//模糊查询的内容
        searchClass:''
      }
    },
    //文档加载事件,当没有任何按钮去点击触发事件时，可以使用该函数在加载时，触发事件！
    mounted() {
      this.studentList();
    },
    methods:{
      selectRow(row) { // 给操作行 高亮
        if (row) {
          this.$refs.table.setCurrentRow(row, true);  // 高亮某一行
        } else {
          this.$refs.table.setCurrentRow();  // 取消高亮
        }
      },
      //执行分页查询的函数
      studentList(curpage = 1) {
        var students=this;
        axios.get(
          "http://localhost:1313/student/queryStudentByPage",
          {params:{current:students.curpage, rows: students.pagesize,search:students.search}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.students = res.data.data.students;
          this.total = res.data.data.total;
        });
      },
      // 监听 pageSize 改变的事件
      handleSizeChange (newSize) {
        //   console.log(newSize)
        //  将监听接受到的每页显示多少条的数据 newSzie 赋值给 pagesize
        this.pagesize = newSize;
        //  修改完以后，重新发起请求获取一次数据
        this.studentList();
      },
      // 监听 页码值  改变的事件
      handleCurrentChange (newPage) {
        //   console.log(newPage)
        //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
        this.curpage = newPage;
        //  修改完以后，重新发起请求获取一次数据
        this.studentList();
      },
      openupdate(data){
        console.log(data)
        //打开模态框
        this.updatestudentdialog=true;
        //数据回显
        this.updatestudentform = data;
      },
      //修改学生
      updateStudent() {
        var updateInfo = this;
        axios({
          headers:{'Content-Type':'application/x-www-form-urlencoded'},
          method:"post",
          url:"http://localhost:1313/student/studentUpdate",
          data:Qs.stringify(updateInfo.updatestudentform)
        }).then((res)=>{
          if (res.data.code == 200) {
            this.$message({
              message:res.data.msg,
              type:"success"
            });
            this.updatestudentdialog = false;
            this.studentList()
          }else{
            this.$message.error(res.data.msg)
          }
        })
      },
      //关闭修改的模态框
      closeupdate() {
        this.$refs.updateform.resetFields();
      },
      //删除用户
      deleteStudent(data){
        console.log(data)
        //询问窗口
        this.$confirm("是否删除该学生？","提示",{
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning",
        }).then(()=>{
          //发送请求到后端
          axios.get(
            "http://localhost:1313/student/studentDelete",
            {params:{stuNum:data}}
          ).then((res)=>{
            if (res.data.code == 200) {
              this.$message({
                type:"success",
                message:res.data.msg
              });
              this.curpage = 1;//重新设置当前页面
              this.studentList();//刷新页面
            }else{
              this.$message.error(res.data.msg);
            }
          })
        }).catch(()=>{
          this.$message({
            type:"info",
            message:"已取消删除"
          })
        })
      },
      // 按学号查询
      searchdata1() {
        this.curpage = 1;
        var student=this;
        axios.get(
          "http://localhost:1313/student/queryStudentByStuNumPage",
          {params:{current:student.curpage, rows: student.pagesize,search:student.searchNum}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.students = res.data.data.students;
          this.total = res.data.data.total;
        });
        this.searchNum ="";
      },
      // 按班级模糊查询
      searchdata2(){
        this.curpage = 1;
        var students=this;
        axios.get(
          "http://localhost:1313/student/queryStudentByStuClassPage",
          {params:{current:students.curpage, rows: students.pagesize,search:students.searchClass}}
        ).then((res)=>{
          console.log(res)
          //将返回数据赋值给绑定数据，完成数据渲染
          this.students = res.data.data.students;
          this.total = res.data.data.total;
        });
        this.searchClass ="";
      },
      // 按姓名模糊查询
      searchdata(){
        this.curpage = 1;
        //回调分页查询，增加分页查询的参数
        this.studentList();
        this.search ="";
      },
      // 按下回车键实现搜索
      searchData1(e){
        var keyCode = window.event? e.keyCode:e.which;
        console.log("回车搜索", keyCode, e);
        if (keyCode == 13) {
          this.searchdata1();
        }
      },
      // 按下回车键实现搜索
      searchData2(e){
        var keyCode = window.event? e.keyCode:e.which;
        console.log("回车搜索", keyCode, e);
        if (keyCode == 13) {
          this.curpage = 1;
          //回调分页查询，增加分页查询的参数
          this.studentList();
          this.search ="";
        }
      },
      // 按下回车键实现搜索
      searchData3(e){
        var keyCode = window.event? e.keyCode:e.which;
        console.log("回车搜索", keyCode, e);
        if (keyCode == 13) {
          this.searchdata2();
        }
      }
    }
  }

</script>

<style>
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color:  rgba(227, 189, 241, 0.76) !important;
    color: #fff;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }
  .form{
    display: grid;
    justify-content: center;
    /* align-items: center; */
    justify-items: center;
  }
  .el-button--info.is-plain {
    color: #704141;
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  .el-button--mini {
    font-size: 14px;
    border-radius: 3px;
  }
  .el-breadcrumb{
    padding-bottom: 20px;
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
